import React from 'react'
import { Layout, Menu, Icon } from 'antd';
import { Router, Route, Switch, Link} from 'react-router-dom';

const { Header, Sider, Content } = Layout;

import Menus from '../components/Layout/Menu'
import UserAvatar from './Home/UserAvatar'
import './Home.scss'
import {routesArr,routesJson} from '../utils/router'

import ServerMana from './userMana/ServerMana'


class Home extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            collapsed: false,
            menuKey:'',
            menuName:''
        };
    }
    toggle () {
      this.setState({
        collapsed: !this.state.collapsed,
      });
    }
    componentWillMount() {
      let pathName = location.pathname
      let key = pathName.split("/");
      this.setState({
        menuKey:key[1],
        menuName:routesJson[key[1]]
      })
      
    }
    changeMenu(menuKey){
      this.setState({
        menuName:routesJson[menuKey]
      })
      // arr.map((item) =>{
      //   if(item.key === menuName){
      //     this.setState({
      //       menuName:item.name
      //     })
      //   }
      // })
    }
    render() {
      return (
        <Layout style={{height:'100%',margin:'0'}}>
          <Sider
            trigger={null}
            collapsible
            collapsed={this.state.collapsed}
          >
            <div className="logo" />
            <UserAvatar />
            <Menus changeMenu={this.changeMenu.bind(this)} menuKey={this.state.menuKey} />
          </Sider>
          <Layout>
            <Header style={{ background: '#fff', padding: 0 }}>
              <Icon
                className="trigger"
                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.toggle.bind(this)}
              />
              <span className="menuName">{this.state.menuName}</span>
            </Header>
            <Content style={{ margin: '24px 16px', padding: '24px 24px 0', background: '#fff'}}>
              <Route path="/ServerMana" component={ServerMana} />
            </Content>
          </Layout>
        </Layout>
      );
    }
}

export default Home
